<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="4" :sm="24">
              <a-form-item label="报刊种类">
                <a-input v-model="queryParam.search" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="人员">
                <a-input style="cursor: pointer;" @click="toSelectMember" v-model="queryParam.memberName" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="日期">
                <a-range-picker v-model="dateRange" @change="onAddTimeRtChange" />
                <!-- <a-input v-model="queryParam.addTimeRt" placeholder=""/> -->
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" icon="plus" @click="toAdd">新增</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :row-key="(record)=>record.id"
        :showPagination="true"
      >
        <span slot="submitState" slot-scope="text, record">
          <a-dropdown>
            <a-tag :color="(text === '待审核') ? 'orange' : (text === '审核通过') ? 'green' : 'gray'">
              {{ text }}
            </a-tag>
            <a-menu slot="overlay">
              <a-menu-item key="待审核">
                <a href="javascript:;" @click="updateState(record, '待审核')">待审核</a>
              </a-menu-item>
              <a-menu-item key="已完成">
                <a href="javascript:;" @click="updateState(record, '审核通过')">审核通过</a>
              </a-menu-item>
              <a-menu-item key="待作废">
                <a href="javascript:;" @click="updateState(record, '作废')">作废</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <span slot="code" slot-scope="text">
          <img :src="text" style="width:80px;height:80px;" />
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <!-- <a @click="toDeliveryDetail(record)">
              <a-icon type="paper-clip" />查看投递
            </a>
            <a-divider type="vertical" />
            <a @click="toBandTicket(record)">
              <a-icon type="paper-clip" />投递信息
            </a>
            <a-divider type="vertical" /> -->
            <a @click="toDetailOnly(record)">详情</a>
            <a-divider type="vertical" />
            <a @click="toDetail(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="toDelete(record)">
              <template slot="title">
                <p>确定要删除这条记录吗？</p>
              </template>
              <!-- <a-button>TL</a-button> -->
              <a>删除</a>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
      <detail-form :visible="detailVisible" :model="this.model" @cancel="()=>{this.detailVisible=false}" @ok="modalOk" />
      <band-ticket :visible="bandTickVisible" :model="this.model" @cancel="()=>{this.bandTickVisible=false}" @ok="modalOk" />
      <delivery-detail :visible="deliveryVisible" :model="this.model" @cancel="()=>{this.deliveryVisible=false}" @ok="modalOk" />
      <detail-only :visible="detailOnlyVisible" :model="this.model" @cancel="()=>{this.detailOnlyVisible=false}" @ok="modalOk" />
      <select-member :visible="selectMemberVisible" :model="this.model" @cancel="()=>{this.selectMemberVisible=false}" @OnSelect="onSelectMember" @ok="modalOk" />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getRecordLists, deleteRecord, putRecord } from '@/api/manage'
import { STable } from '@/components'
import DetailForm from './Detail'
import BandTicket from './BandTicket'
import { notification } from 'ant-design-vue'
import DeliveryDetail from './DeliveryDetail'
import DetailOnly from './DetailOnly'
import SelectMember from './SelectMember'
export default {
  name: 'RecordLists',
  data () {
    return {
      dateRange: [],
      selectMemberVisible: false,
      model: {},
      detailOnlyVisible: false,
      bandTickVisible: false,
      detailVisible: false,
      deliveryVisible: false,
      queryParam: {},
      departmentList: [],
      columns: [
        {
          title: '#',
          dataIndex: 'id'
        },
        {
          title: '发票流水号',
          dataIndex: 'fpqqlsh'
        },
        {
          title: '发票抬头',
          dataIndex: 'buyerName'
        },
        {
          title: '买方银行账号',
          dataIndex: 'account'
        },
        {
          title: '货物名称',
          dataIndex: 'goodsName'
        },
        {
          title: '总额',
          dataIndex: 'totalPrice'
        },
        {
          title: '发票状态',
          dataIndex: 'submitState',
          scopedSlots: { customRender: 'submitState' }
        },
        {
          title: '开票人',
          dataIndex: 'member.name'
        },
        // {
        //   title: '添加时间',
        //   dataIndex: 'addtime'
        // },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        // 不要在这里修改分页大小，STable已经写死默认每一页10条
        const cParameter = { pageSize: parameter.pageSize, pageNum: parameter.pageNo }
        const requestParameter = Object.assign({}, cParameter, this.queryParam)
        return new Promise((resolve, reject) => {
          getRecordLists(requestParameter).then(res => {
            this.departmentList = res.data
            res.data.forEach((item) => {
              item.addtime = this.Format(item.addtime, 'yyyy-MM-dd hh:mm:ss')
            })
            resolve({
              data: res.data,
              totalCount: parseInt(res.headers['x-count']),
              pageNo: parameter.pageNo,
              pageSize: parameter.pageSize
            })
            // return {
            //   data: res.data,
            //   totalCount: parseInt(res.headers['x-count']),
            //   pageNo: parameter.pageNo,
            //   pageSize: parameter.pageSize
            // }
          }).catch(e => {
            reject(e)
          })
        })
      }
    }
  },
  components: {
    STable,
    DetailForm,
    BandTicket,
    DeliveryDetail,
    DetailOnly,
    SelectMember
  },
  created () {
    // this.init()
  },
  methods: {
    onAddTimeRtChange (date, dateString) {
      this.dateRange = dateString
      this.queryParam.addTimeRt = this.dateRange[0]
      this.queryParam.addTimeLt = this.dateRange[1]
    },
    onSelectMember (record) {
      this.queryParam.memberName = record.name
      this.queryParam.memberId = record.id
      this.selectMemberVisible = false
    },
    toSelectMember () {
      this.selectMemberVisible = true
    },
    toDetailOnly (record) {
      this.model = record
      this.detailOnlyVisible = true
    },
    toDeliveryDetail (record) {
      this.model = record
      this.deliveryVisible = true
    },
    toBandTicket (record) {
      this.model = record
      this.bandTickVisible = true
    },
    updateState (record, state) {
      const tempState = { ...record }
      tempState.submitState = state
      putRecord(tempState.id, tempState).then(res => {
        this.$refs.table.refresh(true)
      })
    },
    modalOk () {
      this.model = {}
      this.detailVisible = false
      this.bandTickVisible = false
      this.$refs.table.refresh(false)
    },
    init () {
      getRecordLists({ pageSize: this.pageSize, pageNum: this.pageNo }).then(res => {
        this.departmentList = res.data
        console.log(this.departmentList)
      })
    },
    toAdd () {
      this.model = {}
      this.detailVisible = true
    },
    toDetail (record) {
      this.model = record
      this.detailVisible = true
    },
    toDelete (record) {
      if (record.submitState === '审核通过') {
        notification.error({
          message: '删除失败',
          description: '审核通过的发票不能被删除'
        })
        return
      }
      deleteRecord(record.id).then(res => {
        notification.success({
          message: '提示',
          description: '删除成功'
        })
        this.$refs.table.refresh(false)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
